<template>
  <div class="phoneCode">
    <van-nav-bar @click-left="goBack">
      <template #left>
        <van-icon name="arrow-left" size="18" />
        <span class="back">返回</span>
      </template>
    </van-nav-bar>
    <van-form @submit="onSubmit">
      <p class="topic">我们将发送验证码到您的手机</p>
      <van-field v-model="phone"  :border="true" left-icon="phone"  clearable name="手机号" placeholder="请输入手机号"
        :rules="[{ required: false, message: '请填写手机号' }]"/>
      <div style="margin: 16px;">
        <van-button color="#DB3D3C" block type="info" native-type="submit">下一步</van-button>
      </div>
    </van-form>
    <p class="goLogin">已有账号?<span @click="goBack">登录</span></p>
  </div>
</template>

<script>

export default {
  name: 'PhoneCode',
  components: {

  },
  data () {
    return {
      phone: ''
    }
  },
  watch: {

  },
  mounted () {

  },
  methods: {
    goBack () {
      console.log(11)
      // this.$router.back()
      this.$router.push({
        name: 'Login'
      })
    },
    onSubmit () {
      if (!this.phone) {
        this.$toast.fail('请正确输入手机号')
      } else {
        console.log(this.phone)
        this.$store.dispatch('Login/getPhoneCode', { mobile: this.phone })
        this.$router.push({ name: 'GetPhoneCode', params: { mobile: this.phone } })
        console.log(this.$store)
      }
    }
  }
}

</script>
<style scoped lang='scss'>
.phoneCode{
  .back{
    position: absolute;
    left: 33px;
    top: 13px;
    width: 30px;
    color: rgb(25,137,250);
  }
}
.van-form{
  padding: 30px 0;
  text-align: center;
}
::v-deep .van-field__control {
  font-size: 16px;
}
::v-deep .van-field{
  width: 90%;
  border: 1px solid #ccc;
  height: 40px;
  text-align: center;
  margin: 15px 20px;
  margin-bottom: 40px;
}
.topic{
  font-size: 14px;
  text-align: left;
  padding-left:20px ;
}
.goLogin{
  font-size: 14px;
  color: #999;
  span{
    color: #DB3D3C;
  }
  text-align: right;
  padding-right: 20px;
}
</style>
